import React from 'react';
import {
  Space, Table, Tag, Badge, Button
} from 'antd';
import axios from 'axios';
import Dialog from '../../components/Dialog';
import Detail from './defail';

// alarmMsg: "dockate服务无响应"
// dealTime: 0
// detail: "192.168.8.208"
// id: 1
// level: "extreme_urgent"
// ownerShip: "$"
// time: 1653294370218
// type: "dockate"
// visible: false

class HardwareTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      level: [],
      type: [],
      hostList: [],
      detail: {}
    };
  }

  componentDidMount() {
    // 告警等级
    axios.get('/aiOps/alarm/level').then((res) => {
      const { data = [] } = res.data || {};
      this.setState({ level: data });
    });
    axios.get('/aiOps/alarm/type').then((res) => {
      const { data = [] } = res.data || {};
      this.setState({ type: data });
    });
  }

  showDetails = ({ id }) => {
    const { type } = this.state;
    axios.get(`/aiOps/cloudService/cloudServices/${id}`).then((res) => {
      const { data: detail } = res.data;
      if (!detail) {
        Dialog({
          type: 'info',
          title: '',
          content: '没查询到该条服务详细信息!'
        });
        return;
      }
      this.setState({ detail }, () => {
        Dialog({
          width: 900,
          type: 'modal',
          title: '服务详情',
          content: <Detail detail={detail || {}} />
        });
      });
    });
  };

  render() {
    console.log(this.props);
    const { level, type } = this.state;
    const { tableData, total, changePage } = this.props;

    const serverName = [];
    const serverSign = [];

    tableData.forEach((item) => {
      serverName.push({
        text: item.name,
        value: item.name
      });
      serverSign.push({
        text: item.prefix,
        value: item.prefix
      });
    });

    // tableData = new Array(10000).fill(tableData[0]);

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: '10%'
      },
      {
        title: '服务名称',
        dataIndex: 'name',
        key: 'name',
        width: '10%',
        filters: serverName,
        filterMode: 'menu',
        filterSearch: true,
        onFilter: (value, record) => record.level.indexOf(value) === 0
      },
      {
        title: '服务标识',
        key: 'prefix',
        dataIndex: 'prefix',
        width: '10%',
        filters: serverSign,
        onFilter: (value, record) => record.level.indexOf(value) === 0
      },
      {
        title: 'url',
        key: 'accessUrl',
        width: '20%',
        dataIndex: 'accessUrl'
      },
      {
        title: '协议类型',
        key: 'protocol',
        dataIndex: 'protocol',
        filters: [
          {
            text: 'HTTP',
            value: 'HTTP'
          },
          {
            text: 'HTTPS',
            value: 'HTTPS'
          }
        ],
        filterMode: 'menu',
        width: '10%',
        filterSearch: true,
        onFilter: (value, record) => record.protocol === value
      },
      {
        title: '时间',
        key: 'deployTime',
        width: '10%',
        dataIndex: 'deployTime',
        render: (val) => new Date(Number(val)).toLocaleString()
      },
      {
        title: '服务状态',
        key: 'serviceStatus',
        dataIndex: 'serviceStatus',
        width: '10%'
      },
      {
        title: '业务域标识',
        key: 'tag',
        dataIndex: 'tag',
        width: '10%'
      },      
      {
        title: '操作',
        key: 'id',
        render: (val) => (
          <Button type="link" onClick={() => this.showDetails(val)}>详情</Button>
        )
      }
    ];

    return (
      <Table
        rowKey={(row) => row.id}
        pagination={{
          hideOnSinglePage: true,
          pageSize: 100,
          total, 
          showSizeChanger: false,
          onChange: (a, b) => {
            changePage(a);
          }
        }}
        columns={columns}
        // size={'small'}
        dataSource={tableData}
        scroll={{ y: '600px' }}
      />
    );
  }
}

export default HardwareTable;
